import React, {Component} from 'react'
import {connect} from 'react-redux'
import { getAnime, soAnime } from 'actions/'
import { homeTitle } from 'root/config'
import Loading from 'components/Loading'
import './anime'

class AnimeList extends Component {
    constructor(props) {
    super(props)
        this.state = {
            type: 'Monday',
            soData: []
        }
    }

    componentWillMount() {
        !this.props.indexNum && (document.title=`动漫大全 - ${homeTitle}`)
        const { dispatch, _getAnime } = this.props
        _getAnime.data && _getAnime.data.length ? null : dispatch(getAnime());
        const a = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        const week = new Date().getDay();
        this.setState({
            type: a[week],
            today: a[week],
        })
    }

    getData(type){
        this.setState({
            type
        })
    }

    picHttps(pic){
        return pic.indexOf('sinaimg') != -1 ? 'https://' + pic.split('://')[1] : 'https://p0.99496.com/uploads/' + pic
    }

    picSoHttps(pic){
        return pic.indexOf('sinaimg') != -1 ? 'https://' + pic.split('://')[1] : 'https://p0.99496.com/uploads/' + pic.split('http://p0.99496.com/uploads/')[1]
    }

    renderAnime(today){
        const Anime = this.props._getAnime.data[today]
        const AnimeList = Anime ? Anime.map((item,i) => {
            return <a key={i} target="_blank" href={`http://www.ikanfan.com${item.link}`}><div><img src={this.picHttps(item.vodPic)} alt={item.title} /></div><h3>{item.title}</h3>{item.isDate ? <p style={{color:'#f60'}}>{item.status === '更新至0话' ? '完结' : item.status}</p> : <p>{item.status === '更新至0话' ? '完结' : item.status}</p>}</a>
        }) : <Loading />
        return AnimeList
    }

    renderSoAnime(data){
        const dataList = data ? data.map((item,i) => {
            return <a key={i} target="_blank" href={`http://www.ikanfan.com${item.url}`}><div><img src={this.picSoHttps(item.pic)} alt={item.name} /></div><h3>{item.name}</h3>{item.continu.indexOf('连载') != -1 ? <p style={{color:'#f60'}}>{item.continu}</p> : <p>{item.continu}</p>}</a>
        }) : <Loading />
        return dataList
    }

    searchChange(e){
        const q = e.target.value
        const a = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        const week = new Date().getDay();
        const { dispatch } = this.props
        if(q.length){
            this.setState({
                type: 'search'
            }, () => dispatch(soAnime({
                q
            })).then((data) =>{
                console.info(data)
                this.setState({
                    soData: data.data
                })
            }))
        }else{
            this.setState({
                type: a[week],
                today: a[week],
            })
        }
    }

    render() {
        const { type, today, soData } = this.state
        const isDis = type === 'search' ? 'hide' : 'show'
        return(
            <div className="wp">
                <ul className={`j-tab ${isDis}`}>
                    <li onClick={() => this.getData('Monday')} className={type === 'Monday' ? 'cur' : ''}>{today === 'Monday' ? '今天' : '周一'}</li>
                    <li onClick={() => this.getData('Tuesday')} className={type === 'Tuesday' ? 'cur' : ''}>{today === 'Tuesday' ? '今天' : '周二'}</li>
                    <li onClick={() => this.getData('Wednesday')} className={type === 'Wednesday' ? 'cur' : ''}>{today === 'Wednesday' ? '今天' : '周三'}</li>
                    <li onClick={() => this.getData('Thursday')} className={type === 'Thursday' ? 'cur' : ''}>{today === 'Thursday' ? '今天' : '周四'}</li>
                    <li onClick={() => this.getData('Friday')} className={type === 'Friday' ? 'cur' : ''}>{today === 'Friday' ? '今天' : '周五'}</li>
                    <li onClick={() => this.getData('Saturday')} className={type === 'Saturday' ? 'cur' : ''}>{today === 'Saturday' ? '今天' : '周六'}</li>
                    <li onClick={() => this.getData('Sunday')} className={type === 'Sunday' ? 'cur' : ''}>{today === 'Sunday' ? '今天' : '周日'}</li>
                </ul>
                <div className='search'><input type='text' placeholder='搜索你喜欢的动漫名称中文或者拼音、角色、声优。' onChange={(e) => this.searchChange(e)} /></div>
                <div className={`d-item clearfix${this.props.indexNum ? ' d-scroll' : ''}`}>
                    {type === 'search' ? this.renderSoAnime(soData) : this.renderAnime(type)}
                </div>
            </div>
        )
    }
}

function mapStateToProps({getAnime}) {
    return {
        _getAnime: getAnime,
    }
}

export default connect(mapStateToProps)(AnimeList)
